<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>提现</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no,email=no" name=format-detection />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />
	<script src="./vue.min.js"></script>
	<script src="./jquery.min.js"></script>
	
	<style>
        /* 去除浏览器默认样式reset */
        html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
        }
        html, body {
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
        }
        main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
        ul {list-style: none;}
        table {border-collapse: separate; border-spacing: 0;}
        th {font-weight: bold; vertical-align: bottom;}
        td {font-weight: normal; vertical-align: top;}
        input{
            outline: none;
            border: none;
        }
		#message1 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message2 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message3 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message4 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#app{
			height: 100vh;
			padding-top: 40px;
			box-sizing: border-box;
		}
		.title{
			font-size: 15px;
			color: #b7b7b7;
			text-align: center;
		}
		.price{
			text-align: center;
			font-size: 19px;
			margin-top: 20px;
		}
		.container{
			padding: 20px;
			box-sizing: border-box;
			margin-top: 20px;
		}
		.input{
			border-bottom: 1px solid #f2f2f2;
			padding: 10px 0px;
			display: flex;
			align-items: center;
		}
		input{
			width: 300px;
			height: 30px;
		}
		.all{
			color: #2c6cf4;;
			font-size: 12px;
			margin-top: 10px;
			text-align: right;
		}
		.loginBtn{
			margin: 30px 0;
			background-color: #2c6cf4;
			color: #f2f2f2;
			width: 100%;
			border-radius: 4px;
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
		}
		.loginBtnDis{
			margin: 30px 0;
			background-color: #cbcbcb;
			color: #f2f2f2;
			width: 100%;
			border-radius: 4px;
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
		}
		.desc{
			font-size: 14px;
			margin-bottom: 6px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="title">可提现金额（元）</div>
		<div class="price">{{info.cash_balance}}</div>
		<div class="container">
			<div style="color: #b7b7b7;">输入提现金额</div>
			<div class="input">
				<span>￥</span>
				<input style="width: 90%;" type="text" v-model="money" placeholder="请输入金额">
			</div>
			<div class="all" @click="allMoney">全部提现</div>
			<div v-if="info.is_cash === 1" class="loginBtn" @click="login">提现</div>
			<div v-else class="loginBtnDis" @click="login">提现</div>
			<div class="desc">提现规则：</div>
			<div class="desc">1. 每天只能提现{{info.is_crash}}次</div>
			<div class="desc">2. 每次提现限额为1元至100元；</div>
			<div class="desc">3. 提现后，金额立即到账，请在微信账户查询；</div>
		</div>
		<!-- is_crash -->
		<div style="text-align: center;color: #2c6cf4;margin-top: 20px;font-size: 12px;" @click="window.location.href = '/log.html'">提现记录</div>
		<div id="message1">请输入金额</div>
		<div id="message2">提现成功</div>
		<div id="message3">提现成功</div>
	</div>
<script>
// 引入rem，使用rem单位，对不同手机屏幕进行适配
(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px' // 1rem  = 100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        }
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

const baseUrl = 'https://xyy.macoolliving.com'
var vapp = new Vue({
	el : '#app',
	data: {
		infoUrl: '/api/crash/main/info',
		crashUrl:'/api/crash/main/crash',
		info:{},
		money:''
	},
	created() {
		this.token = localStorage.getItem('m-token')
		$.ajax({
			url: baseUrl+this.infoUrl,
			type: 'GET',
			contentType: 'application/json', // 发送信息至服务器时内容编码类型
			dataType: 'json', // 预期服务器返回的数据类型
			headers:{
				token: this.token
			},
			success: function(res) {
				vapp.$data.info = res.data
				console.log(res,'res')
			},
		});	
	},
	methods : {
		allMoney() {
			vapp.$data.money = this.info.cash_balance
		},
		startCountdown() {
		  this.timer = setInterval(() => {
			if (this.remainingTime > 0) {
			  this.remainingTime--;
			} else {
			  this.clearCountdown();
			}
		  }, 1000);
		},
		clearCountdown() {
		  clearInterval(this.timer);
		  this.timer = null;
		  this.remainingTime = 0; // 重置倒计时时间
		},
		login(){
			if(this.info.is_cash === 0) return console.log('禁止提现')
			if(!this.money) return $('#message1').fadeIn(100).delay(2000).fadeOut(100);
			let params = {
				money: this.money,
			}
			$.ajax({
			    url: baseUrl+this.crashUrl,
			    type: 'POST',
				contentType: 'application/json', // 发送信息至服务器时内容编码类型
				data: JSON.stringify(params), // 将对象转换为JSON字符串作为发送数据
				dataType: 'json', // 预期服务器返回的数据类型
				headers:{
					token: this.token
				},
			    success: function(res) {
					if(res.code === 200 ){
						$('#message2').fadeIn(100).delay(2000).fadeOut(100);
					}else{
						$('#message3').html(res.message).fadeIn(100).delay(2000).fadeOut(100);
					}
			    },
			});
		},
	}
});
</script>
</body>
</html>